<?php include('../resources/views/header.blade.php'); ?>

<section style="margin-top:18px;margin-left:12px;margin-right:12px;">
    <span style="background-color:#ddd;border-radius:4px;padding:6px;"><?php if(isset($question)){ echo $question[0]->topic_name; } ?></span>
    <div style="float:right;">
        <?php
        if( isset($is_attention) && $is_attention == 1 ){
            echo '<button class="button mcolor" id="attention_btn" style="height:30px;padding-top:4px;padding-bottom:4px;background-color:#eee;">取消关注</button>';
        }else{
            echo '<button class="button mcolor" id="attention_btn" style="height:30px;padding-top:4px;padding-bottom:4px;background-color:#eee;">关注问题</button>';
        }
        ?>
    </div>
    <div style="clear:both;margin-top:4px;padding-top:4px;">
        <p style="font-size:20px;padding-left:6px;padding-right:6px;"><?php if(isset($question)){ echo $question[0]->title; } ?></p>
        <p style="font-size:14px;padding-left:6px;padding-right:6px;color:#666;"><?php if(isset($question)){ echo $question[0]->description; } ?></p>
    </div>
    <div style="margin-bottom:24px;margin-left:12px;padding-top:28px;">
        <span style="line-height:16px;color:#757575;"><img src="../images/heart_dark.png" style="height:12px;" /> <span id="attention_count_span"><?php if(isset($attention_count)){ echo $attention_count; } ?></span></span>
        <!-- <span style="line-height:16px;margin-left:10px;color:#757575;"><img src="../images/answer_dark.png" style="height:14px;" /> <span id="answers_count_span"><?php if(isset($answers)){ echo count($answers); } ?></span></span> -->
        <span style="float:right;color:#666;">共有<?php if(isset($answers)){ echo count($answers); } ?>个回答</span>
    </div>
</section>

<section style="clear:both;background-color:#fff;margin-top:24px;border-top:1px solid #eee;margin-bottom:-12px;">
    <?php
        if( isset($answers) && count($answers) > 0 ){
            foreach( $answers as $key => $val ){
                echo '<div style="padding:12px;margin-left:6px;">';
                echo '    <a href="/answer/'.$val->id.'">';
                echo '        <div style="height:24px;margin-top:4px;">';
                echo '            <img class="header" src="http://source.timepicker.cn/'.$val->icon.'" style="width:22px;height:22px;vertical-align:top;" />';
                echo '            <span style="display:inline-block;max-width:80%;color:#333333;font-size:14px;line-height:24px;margin-left:6px;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;">'.$val->name.'</span>';
                echo '            <span style="color:#58bdfd;float:right;line-height:24px;"><img src="../images/set_top.png" style="height:10px;" /> '.$val->up.'</span>';
                echo '        </div>';
                echo '        <p class="answer-brief" style="color:#666;line-height:20px;overflow: hidden;max-height:60px;">';
                echo '             '.$val->content;
                echo '        </p>';
                echo '    </a>';
                echo '</div>';
                if( $key < count($answers)-1 && count($answers) > 1 ){
                    echo '<div style="height:1px;background-color:#eee;margin-left:12px;margin-right:12px;"></div>';
                }
            }
        }else{
            echo '<div style="padding-top:16px;padding-bottom:24px;">';
            echo '    <p style="text-align:center;color:#888;">';
            echo '        此问题暂时还无人回答';
            echo '    </p>';
            echo '</div>';
        }
    ?>
</section>

<!--提问-->
<div class="clearfix bottom" style="border:0px;width:auto;bottom:30px;position:fixed;right:0px;">
    <a href="/do_answer/<?php if(isset($question)){ echo $question[0]->id; } ?>">
        <div class="right" style="width:60px;height:60px;border-radius:60px;background-color:#58bdfd;border:1px solid #ddd;margin-right:16px;">
            <img class="header right" src="../images/new_question.png" style="border-radius:60px;width:24px;height:24px;margin-top:16px;margin-right:16px;" />
        </div>
    </a>
</div>


<?php include('../resources/views/footer.blade.php'); ?>

<script type="text/javascript">
    var is_attention        = <?php if(isset($is_attention)){ echo $is_attention; } ?>;
    var question_id         = <?php if(isset($question)){ echo $question[0]->id; } ?>;
    var attention_count     = <?php if(isset($attention_count)){ echo $attention_count; } ?>;
    var answers_count       = <?php if(isset($answers)){ echo count($answers); } ?>;
    $("#attention_btn").on('click',function(){
        if( question_id == '' ){
            toast('无法操作');return;
        }
        $.ajax({
            type : "POST" ,
            url : "/attention/"+question_id ,
            data : {"tag" : is_attention} ,
            dataType : "json" ,
            success : function(data){
                if( data.error ){
                    toast(data.message);
                }else{
                    toast('操作成功');
                    is_attention = is_attention==1 ? 0 : 1;
                    if( is_attention == 1 ){
                        $("#attention_btn").html('取消关注');
                        attention_count = attention_count*1+1;
                    }else{
                        $("#attention_btn").html('关注问题');
                        attention_count = attention_count*1-1;
                    }
                    $("#attention_count_span").html( attention_count );
                }
            }
        });
    });
</script>
